<script setup lang="ts">

import { ref } from "vue";
import img1 from "../../assets/4.jpg?url";

const articles = ref([
  {
    id: 0,
    title: "建成武夷山首座乡村儿童操场，全国累计落地103座",
    text: "   夏日的国营福建省武夷山华侨农场学区附属幼儿园，4368块蓝色悬浮地板拼接成405.8平方米的崭新操场，孩子们奔跑跳跃的身影与清脆的笑声交织。这座由八马茶业独立筹集善款、联合美团、壹基金捐建的操场，是武夷山首座乡村儿童操场，也是八马加入美团乡村儿童操场计划落地的第103座爱心工程。",
    publishTime: new Date(2023, 5, 16).getTime(),
    imgSrc: img1
  },
  {
    id: 1,
    title: "中国工程院顶尖智库集结！",
    text: "近日，一场汇聚中国茶产业顶尖智囊的战略对话在云南展开。由中国工程院张新友院士、李培武院士、周卫院士、金梅林院士、朱有勇院士、刘仲华院士等六位权威专家，与中国农业科学院茶叶研究所、湖南农业大学等多位高校科研代表，以及八马茶业董事长王文礼等茶行业头部品牌代表组成的调研团，共赴云南，聚焦茶产业核心议题，共商高质量发展大计。此次高层次研讨标志着中国茶行业产学研深度融合迈入新阶段",
    publishTime: new Date(2021, 7, 20).getTime()
  },
  {
    id: 2,
    title: "中国工程院顶尖智库集结！",
    text: "近日，一场汇聚中国茶产业顶尖智囊的战略对话在云南展开。由中国工程院张新友院士、李培武院士、周卫院士、金梅林院士、朱有勇院士、刘仲华院士等六位权威专家，与中国农业科学院茶叶研究所、湖南农业大学等多位高校科研代表，以及八马茶业董事长王文礼等茶行业头部品牌代表组成的调研团，共赴云南，聚焦茶产业核心议题，共商高质量发展大计。此次高层次研讨标志着中国茶行业产学研深度融合迈入新阶段",
    publishTime: new Date(2019, 3, 23).getTime()
  },
  {
    id: 3,
    title: "中国工程院顶尖智库集结！",
    text: "近日，一场汇聚中国茶产业顶尖智囊的战略对话在云南展开。由中国工程院张新友院士、李培武院士、周卫院士、金梅林院士、朱有勇院士、刘仲华院士等六位权威专家，与中国农业科学院茶叶研究所、湖南农业大学等多位高校科研代表，以及八马茶业董事长王文礼等茶行业头部品牌代表组成的调研团，共赴云南，聚焦茶产业核心议题，共商高质量发展大计。此次高层次研讨标志着中国茶行业产学研深度融合迈入新阶段",
    publishTime: new Date(2018, 9, 5).getTime()
  }
]);

</script>

<template>
  <section class="section-2">
    <h2 class="section-title">热点资讯</h2>
    <p><br/></p>
    <div class="hotpoint">
      <div class="hotpoint-left">
        <div class="hotpoint-left-img">
          <img class="hotpoint-left-img" :src="articles[0].imgSrc" :alt="articles[0].title" />
        </div>
        <div class="hotpoint-left-text news-article-preview">
          <p class="news-article-preview-title">{{ articles[0].title }}</p>
          <p class="news-article-preview-text">{{ articles[0].text }}</p>
        </div>
      </div>
      <div class="news-wrapper">
        <ul>
          <li v-for="article in articles" :key="article.id" class="news">
            <div class="news-time">
              <div>{{ new Date(article.publishTime).getDate().toString().padStart(2, "0") }}</div>
              <div>{{
                  new Date(article.publishTime).getFullYear() + "/" +
                  new Date(article.publishTime).getMonth().toString().padStart(2, "0") }}
              </div>
            </div>
            <div class="news-article-preview">
              <p class="news-article-preview-title">{{ article.title }}</p>
              <p class="news-article-preview-text">{{ article.text }}</p>
            </div>
            <span>
              &gt;
            </span>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<style scoped>
.hotpoint {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}

.hotpoint-left {
  width: 50%;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 0;
}

.hotpoint-left-img {
  overflow: hidden;
}

.hotpoint-left-img img{
  width: 100%;
  height: 385px;
  transition: all 0.3s;
}

.hotpoint-left-img:hover img{
  transform: scale(1.1);
}

.hotpoint-left-text {
  font-size: 1rem;
  box-sizing: border-box;
  padding-left: 1rem;
}

.news-wrapper {
  width: 50%;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.news {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  transition: all 0.3s;
  cursor: pointer;
  border-bottom: 1px solid #aaaaaa;
}

.news:last-child {
  border-bottom: none;
}

.news:hover {
  background: #d7a855;
  color: white;
}

.news:hover .news-time div {
  color: var(--primary-color);
}

.news-time div:first-child {
  font-size: 2rem;
  font-weight: bold;
  color: #515151;
}

.news-time div:last-child {
  font-size: 1rem;
  font-weight: 400;
  color: #515151;
}

.news-time {
  width: 96px;
}

.news-article-preview {
  text-align: left;
  overflow: hidden;
  line-height: 1;
}

.news-article-preview-title {
  font-size: 1.25rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-article-preview-text {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  color: #959595;
}
</style>